<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phoneNumber">
        <el-input v-model="form.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="微信" prop="wechat">
        <el-input v-model="form.wechat"></el-input>
      </el-form-item>
      <el-form-item label="qq" prop="qq">
        <el-input v-model="form.qq"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="form.province"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value) == false) {
          callback(new Error("请输入正确的邮箱"));
        } else {
          callback();
        }
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入电话号码"));
      } else {
        if (/^\d{11}$/.test(value) == false) {
          callback(new Error("请输入正确的电话号码"));
        } else {
          callback();
        }
      }
    };
    var validateWechat = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入微信号/手机号"));
      } else {
        if (/^\d+$/.test(value) == false) {
          callback(new Error("请输入正确的微信号/手机号"));
        } else {
          callback();
        }
      }
    };

    var validateQq = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入qq号"));
      } else {
        if (/^\d+$/.test(value) == false) {
          callback(new Error("请输入正确的qq号"));
        } else {
          callback();
        }
      }
    };

    return {
      form: {
        id: "",
        name: "",
        sex: "",
        email: "",
        phoneNumber: "",
        wechat: "",
        qq: "",
        province: "",
        city: "",
        address: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
          
        ],
        email:[
          { required:true, validator: validateEmail, trigger: 'blur' }
        ],
        phoneNumber:[
          { required:true, validator: validatePhone, trigger: 'blur' }
        ],
        wechat:[
          { required:true, validator: validateWechat, trigger: 'blur' }
        ],
        qq:[
          { required:true, validator: validateQq, trigger: 'blur' }
        ],
        province:[
          { required: true, message: "请输入省份", trigger: "blur" },
          
        ],
        city:[
          { required: true, message: "请输入城市", trigger: "blur" },
        ],
        address:[
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ]
      },
    };
  },
  methods: {
    
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  },
};
</script>

<style scoped lang="less">
.el-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-left: 30px;
}
</style>